<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Input Selection Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Input Selection</h1>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
            <h3>Functions:</h3>
            <pre><code>GS.getInputSelection(&lt;ELEMENT&gt;);
GS.setInputSelection(&lt;ELEMENT&gt;, &lt;SELECT-FROM&gt;, &lt;SELECT-TO&gt;);</code></pre>
            
            <h3>Description:</h3>
            <p>These functions are for getting and setting the text selection of &lt;input&gt; and &lt;textarea&gt; HTML elements.</p>
            
            <h1>Examples:</h1>
            <div class="doc-example-description">
                <span class="h3">GS.getInputSelection Example:</span><br />
                <p>In this example when select some text in the input and then you click the "Get Selection" button we will run GS.getInputSelection which returns the start and end of the selection in JSON format. Notice that when you click the button without ever selecting the text of the input it will default to Start: 0 and End: 0. Also notice that when you select the text then leave the input then click the button it will retain the start and end values of the last selection.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="9">
                    <gs-button onclick="testGetSelection()">Get Selection</gs-button>
                    <br />
                    <input id="target" type="text" value="Select some text here" />
                    <br /><br />
                    <div id="result"></div>
                </template>
                <template for="js" height="12">
                    function testGetSelection() {
                        var jsnSelection = GS.getInputSelection(document.getElementById('target'));
                        
                        document.getElementById('result').textContent =
                            'Start: ' + jsnSelection.start + ' ' +
                            'End: ' + jsnSelection.end;
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">GS.setInputSelection Example:</span><br />
                <p>In this example you choose where you want to start and stop the selection at by changing the "From" and "To" controls. When you click the "Set Selection" button the GS.setInputSelection will be sent the "target" input and the "From" and "To" control values. Notice that when both controls are empty the selection goes to the end of the input. Also notice that when the "from" is set but not the "to" then it is assumed that the from and the to should be the same number.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="13">
                    <gs-button onclick="testSetSelection()">Set Selection</gs-button>
                    <label for="number-from">From:</label>
                    <gs-number id="number-from"></gs-number>
                    <label for="number-to">To:</label>
                    <gs-number id="number-to"></gs-number>
                    <br />
                    <label for="target">Target:</label>
                    <input id="target" type="text" value="set selection" />
                </template>
                <template for="js" height="10">
                    function testSetSelection() {
                        GS.setInputSelection(
                            document.getElementById('target'),
                            document.getElementById('number-from').value,
                            document.getElementById('number-to').value
                        );
                    }
                </template>
            </gs-doc-example>
        </gs-container>
    </body>
</html>